import { Tag } from "antd";
import React, { useMemo } from "react";
import { FormattedMessage } from "react-intl";

interface IResourceStatusProps {
    status: string|number;
    dataMap?: ({ value: string|number, label: string, color: string; })[];
}

const ResourceStatus = ({ status, dataMap }: IResourceStatusProps) => {
    const mapInfo = useMemo(() => {
        return dataMap && dataMap.find((item: any) => item.value === status);
    }, [dataMap, status]);
    return (
        <>
        { !mapInfo && <>
            { status === 2 && <Tag color="blue"><FormattedMessage id="admin.pages.article.edit.status.unapprove"/></Tag> }
            { status === 1 && <Tag color="green"><FormattedMessage id="admin.pages.article.edit.status.enable"/></Tag> }
            { status === 0 && <Tag color="error"><FormattedMessage id="admin.pages.article.edit.status.disable"/></Tag> }
        </>}
        { mapInfo && <Tag color={mapInfo.color || "green"}>{mapInfo.label}</Tag> }
        </>
    );
};

export default ResourceStatus;
